<!DOCTYPE html>
{%load staticfiles%}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="{% static 'lib/bootstrap/css/bootstrap.css' %}" rel="stylesheet" type="text/css" />
</head>
<body>
     <div class="panel panel-default" id="pstable">
  <!-- Default panel contents -->
  <div class="panel-heading">设备列表</div>

  <!-- Table -->
  <table class="table">
      <thead>
            <tr>
                <th>id</th>
                <th>device</th>
            </tr>
        </thead>
        <tbody>
            {% for row in device_list %}
                <tr>
                    <td>{{ row.id }}</td>
                    <td>{{ row.device_name }}</td>
                    <td>
                        <a class="moredatabtn">详情</a>
                        |
                        <a href="/del_data/?nid={{ row.id }}">删除</a>
                        |
                        <a href="/map/?nid={{ row.id }}">位置</a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>

  </table>
</div>
    <div>
        <a onclick="showModal()">添加</a>
    </div>
    <style>
        .hide{
            display: none;
        }
        .shadow{
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background-color: black;
            opacity: 0.4;
            z-index: 999;
        }
        .add-modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 300px;
            z-index: 1000;
            background-color: white;
            margin-left: -200px;
            margin-top: -200px;
        }
    </style>
    <div id="shadow" class="shadow hide"></div>
    <div id="addModal" class="add-modal hide">
            <div class="input-group input-group-sm">
            <span class="input-group-addon" id="basic-addon1">DeviceName</span>
                <input type="text" class="form-control" id="name">
            </div>
            <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">DeviceMac</span>
                <input type="text" class="form-control" id="mac">
            </div>
            <input id="adddevice" type="button" value="添加"/>
            <button onclick="hideModal()">取消</button>
    </div>
    <script>
        function showModal() {
            document.getElementById('shadow').classList.remove('hide');
            document.getElementById('addModal').classList.remove('hide');
        }
        function hideModal() {
            document.getElementById('shadow').classList.add('hide');
            document.getElementById('addModal').classList.add('hide');
        }

    </script>
     <script src="{% static 'lib/jquery/jquery.js' %}"></script>
     <script>
    $(document).ready(function () {
        $('.moredatabtn').click(function () {
            var tds = $(this).parent().prevAll();
            var id = $(tds[1]).text();
            $.ajax({
                url: '/more_data/?nid=' + id,
                type: 'GET',
                {#data: {'nid': id},#}
                success: function (arg) {
                    $("#pstable").html(arg);
                }
            });
        });

        $('#adddevice').click(function () {
            devicename = $('#name').val();
            devicemac = $('#mac').val();
            $.ajax({
                url: '/modal_add_device/',
                type: 'POST',
                data: {'name': devicename, 'mac': devicemac},
                success: function (arg) {
                    $("#pstable").html(arg);
                }
            });
        });

        {#$('.mapbutton').click(function () {#}
        {#    var getherf = $(this).attr('href');#}
        {#    $.ajax({#}
        {#        url: getherf,#}
        {#        type: 'GET',#}
        {#        success: function (arg) {#}
        {#            $("#pstable").html(arg);#}
        {#        }#}
        {#    });#}



    })
    </script>

</body>
</html>